<template>
  <div class="content-wrapper">
    <transition name="video">
      <div class="video-box" :style="{height: videoH + 'px'}">
        <video id="myVideo" ref="videoRef" :width="100 + '%'" :height="videoH + 'px'" controls>
          <source :src="url" />
        </video>

        <div class="icon-jiantou" @click="showPlayMenu">
          <i class="icon iconfont" :class="[isShow ? 'iconyoujiantou' : 'iconzuojiantou']"></i>
        </div>
      </div>
    </transition>


    <transition name="slide-fade" mode="out-in">
      <aside :style="{height: videoH + 'px'}" v-show="isShow">
        <div class="time-select flex-align-items">
          <span>日期选择</span>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            size="small"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>

        <ul class="select-box flex">
          <li>
            <el-select v-model="gradeValue" size="small" clearable filterable placeholder="班级" @change="changeGradeOption">
              <el-option
                v-for="item in gradeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="courseValue" size="small" clearable filterable placeholder="课程" @change="changeCourseOption">
              <el-option
                v-for="item in courseList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="teacherValue" size="small" clearable filterable placeholder="老师" @change="changeTeacherOption">
              <el-option
                v-for="item in teacherArrInfo"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
        </ul>

        <ul class="play-data-box" :style="{height: (videoH - 144) + 'px'}">
          <li
            class="play-item flex"
            v-for="(item, i) in playListInfo"
            :key="i"
            :class="{'play-item-active': activeId == i}"
            @click="playItemVideo(i)">
            <div class="play-img-box">
              <img :src="item.url" alt="">
              <span>{{ item.time }}</span>
            </div>

            <div class="play-title-box">
              <h4 class="title">{{ item.title }}</h4>
              <span>{{ item.num }}</span>
            </div>
          </li>
        </ul>
      </aside>
    </transition>
  </div>
</template>

<script>
// let Hls = require('hls.js');
import {mapActions, mapState} from "vuex";
import httpInterface from "../../utils/httpInterface";

export default {
  components: {},
  data() {
    let item = {
      url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590487005968&di=10c4e246b57d9489d47078b3d9e06175&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fcb4fc3a7f0a404be2b7cee6c3c7c0204b8ec4f9f14ff2-sbdIqP_fw658",
      time: "2019-08-10 13:10",
      title: "电商运营五年级一班电商运营课程",
      num: "学生人数：30人"
    }
    return {
      url: "https://www.runoob.com/try/demo_source/mov_bbb.mp4",
      videoW: 100,
      videoH: 600,
      dateValue: [],
      gradeValue: "",
      courseValue: "",
      teacherArrInfo: [{
        value: '1',
        label: '王老师'
      }, {
        value: '2',
        label: '李老师'
      }],
      teacherValue: "",
      playListInfo: Array(20).fill(item),
      activeId: -1,
      isShow: true
    }
  },
  computed: {
    ...mapState(["courseList", "gradeList"])
  },

  mounted() {
    // this.getStream();
    this.getCourseList();
    this.getGradeList();
  },

  methods: {
    ...mapActions(["getCourseList", "getGradeList"]),

    getStream() {
      var hls = new Hls();
      hls.attachMedia(this.$refs.videoRef);
      hls.loadSource(this.url);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        this.$refs.videoRef.play();
      });
    },

    // 选择播放视频
    playItemVideo(index) {
      this.activeId = index;
    },

    showPlayMenu() {
      this.isShow = !this.isShow;
    },

    // 班级选择器
    changeGradeOption() {

    },

    // 课程选择器
    changeCourseOption() {

    },

    // 老师选择器
    changeTeacherOption() {

    },
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/variable";

.content-wrapper {
  padding: 30px 0 50px 0;
  display: flex;
  overflow: hidden;
  position: relative;

  .video-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #272A2E;

    .icon-jiantou {
      position: absolute;
      right: -39px;
      top: 50%;
      transform: translate(0, -53%);
      width: 78px;
      height: 78px;
      background: #45484C;
      border-radius: 50%;
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconzuojiantou,
      .iconyoujiantou {
        font-size: 24px;
        color: #919294;
        margin-left: 10px;
      }

      &:hover .iconzuojiantou,
      &:hover .iconyoujiantou {
        color: #c2c7cb;
      }
    }
  }
}

aside {
  width: 340px;
  background: #45484C;
  padding: 20px 14px;

  .time-select {
    width: 100%;
    font-size: 14px;
    color: $selector-color;

    span {
      margin-right: 14px;
    }
  }

  .select-box {
    margin-top: 20px;

    li {
      width: 90px;
      height: 32px;
      background: $selector-bg;
      border-radius: 100px;
      margin-right: 12px;
    }
  }

  .play-data-box {
    margin-top: 20px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      background-color: rgba(255, 255, 255, 0.02);
      width: .4rem;
    }

    &::-webkit-scrollbar-thumb {
      width: .2rem;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
    }

    .play-item {
      cursor: pointer;
      margin-bottom: 12px;
      transition: all 0.3s;

      .play-img-box {
        width: 130px;
        height: 90px;
        border-radius: 3px;
        border: 1.5px solid #45484C;
        overflow: hidden;
        margin-right: 12px;
        transition: all 0.3s;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          opacity: 0.7;
          transition: all 0.3s;
        }

        span {
          position: absolute;
          bottom: 4px;
          left: 50%;
          transform: translate(-50%);
          width: 90%;
          height: 20px;
          line-height: 20px;
          background: rgba(37, 39, 42, 0.54);
          border-radius: 10px;
          font-size: 12px;
          text-align: center;
          color: #d5d7dc;
        }
      }

      .play-title-box {
        color: #dbdde0;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        font-size: 15px;
        padding-right: 4px;
        transition: all 0.3s;

        span {
          font-size: 12px;
          color: #B0B3B8;
          margin-top: 14px;
          display: inline-block;
          transition: all 0.3s;
        }
      }

      &:hover .play-img-box {
        border: 1.5px solid $hover-color;

        img {
          opacity: 0.9;
        }
      }

      &:hover .play-title-box {
        color: $hover-color;

        span {
          color: #B0B3B8;
        }
      }
    }

    .play-item.play-item-active {
      .play-img-box {
        border: 1.5px solid $hover-color;

        img {
          opacity: 0.9;
        }
      }

      .play-title-box {
        color: $hover-color;

        span {
          color: #B0B3B8;
        }
      }
    }
  }
}
</style>

<style scoped>
.video-enter-active,
.video-leave-active {
  animation: bounce-in .4s ease;
}

.video-enter,
.video-leave-to {
  animation: bounce-in .4s ease;
}

@keyframes bounce-in {
  0% {
    width: 1140px;
  }
  100% {
    width: 798px;
  }
}


.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all .4s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(340px);
  opacity: 0;
}
</style>
